import React, { useEffect } from 'react'
import { Form, Input, Radio, Switch, Select, Button, DatePicker, Upload, message } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import request from '@/utils/request'
const { Option } = Select

export default (props: any) => {
    const { form, id } = props

    const handleUploadChange = (info: any): any => {
        let fileList = info.fileList;
        fileList = fileList.slice(-1);
        if (info.file.status === 'done') {
            message.success(`${info.file.name}文件上传成功`);
            fileList[0].url = fileList[0]['response']['data']['filePath'];
        }
        return fileList
    };
    const onFinish = (values: any) => {
        if (values.avatar && values.avatar.length > 0) {
            values.avatar = values.avatar[0]['url'];
        }
        request(`/member/save/${id}`, {
            method: 'POST',
            data: { ...values },
        }).then((result) => {
            if (result.code === 200) {
                message.success(result.message, 1.5, () => history.back())
            }
        })
    }

    return (
        <Form
            labelCol={{ span: 3 }}
            wrapperCol={{ span: 16 }}
            initialValues={{ sex: 1, status: true }}
            onFinish={onFinish}
            form={form}
        >
            <Form.Item label="用户名" name="username" required rules={[{ required: true, message: '用户名不能为空' }]} help="用于登录，添加成功后不可编辑，请认真填写">
                <Input disabled={id > 0 ? true : false} />
            </Form.Item>
            <Form.Item label="昵称" name="nickname" required rules={[{ required: true, message: '昵称不能为空' }]} help="会员名称">
                <Input />
            </Form.Item>
            <Form.Item label="手机号" name="mobile" required rules={[{ required: true, message: '手机号不能为空' }]} help="已进行手机号验证，请填写正确的手机号">
                <Input disabled={id > 0 ? true : false} />
            </Form.Item>
            <Form.Item label="邮箱" name="email" help="已进行邮箱验证，请填写正确的邮箱">
                <Input />
            </Form.Item>

            <Form.Item label="是否启用" name="enable" valuePropName="checked">
                <Switch />
            </Form.Item>
            {
                id === 0 && <Form.Item label="密码" name="password" required rules={[{ required: true, message: '密码不能为空' }]}>
                    <Input type="password" />
                </Form.Item>
            }


            <Form.Item label="头像" name="avatar" valuePropName="fileList" getValueFromEvent={handleUploadChange}>
                <Upload
                    action='http://127.0.0.1:8888/admin/tool/upload'
                    listType='picture'
                >
                    <Button><UploadOutlined /> Upload</Button>
                </Upload>
            </Form.Item>
            <Form.Item label="会员等级" name="level_id" required rules={[{ required: true, message: '请选择会员等级' }]}>
                <Select placeholder="选择会员等级">
                    <Option value="1">等级</Option>
                </Select>
            </Form.Item>
            <Form.Item label="性别" name="sex">
                <Radio.Group>
                    <Radio value={1}>未知</Radio>
                    <Radio value={2}>男</Radio>
                    <Radio value={3}>女</Radio>
                </Radio.Group>
            </Form.Item>

            <Form.Item label="生日" name="birthday">
                <DatePicker />
            </Form.Item>

            <Form.Item
                wrapperCol={{ offset: 3 }}
            >
                <Button type="primary" style={{ marginRight: "6px" }} htmlType="submit">保存</Button>
                <Button style={{ marginRight: "6px" }} onClick={() => form.resetFields()}>重置</Button>
                <Button onClick={() => history.back()}>返回</Button>
            </Form.Item>
        </Form>
    )
}